<template>
  <view class="">
    <view class="" style="position: relative">
      <view class="top-bg flex-row items-center justify-between">
        <view class="flex-row items-center">
          <view class="" style="position: relative">
            <u-avatar :src="userInfo.icon" size="110"></u-avatar>
            <!-- <view class="login-btn" @click="navTo('/pages/myself/qiandao',{login:true})">签到</view> -->
          </view>
          <view class="" style="padding-left: 30rpx">
            <view
              class="user-name"
              @click="navTo('/pages/myself/edit-info')"
              v-if="userInfo.name"
            >
              {{ userInfo.name }} </view
            >
            <view class="user-name" v-else @click="handleLogin">点击登录</view>
            <text
              class="user-phone"
              @click="navTo('/pages/myself/edit-info')"
              v-if="userInfo.phone"
              >{{ userInfo.phone }}</text
            >
          </view>
        </view>

        <view
          class="message-con"
          style="position: relative"
          @click="navTo('/pages/myself/message', { login: true })"
        >
          <image
            src="/static/img/xiaoxi.png"
            mode=""
            class="message-icon"
          ></image>
          <view class="active" v-if="userInfo.field == 0"></view>
        </view>
      </view>
      <view class="top-con" style="padding-bottom: 200rpx">
        <view class="con">
          <view class="flex-row items-center b-b" style="padding: 20rpx 0">
            <image src="/static/img/zh.png" mode="" class="zh-icon"></image>
            <text class="zh-title">我的账户</text>
          </view>
          <view
            class="flex-row items-center justify-between"
            style="padding-top: 30rpx"
          >
            <view
              class="fill flex-col items-center justify-center"
              @click="
                navTo(
                  `/pages/myself/width?balance=${userInfo.balance}&commission=${userInfo.commission}`,
                  { login: true }
                )
              "
            >
              <text class="zh-m">{{ userInfo.balance || 0 }}</text>
              <text class="zh-item-title">账户余额</text>
            </view>
            <!-- 	<view class="fill flex-col items-center justify-center"
							@click="navTo(`/pages/myself/width?balance=${userInfo.balance}&commission=${userInfo.commission}`,{login:true})">
							<text class="zh-m">{{userInfo.commission || 0}}</text>
							<text class="zh-item-title">赠送余额</text>
						</view> -->
            <view class="fill flex-col items-center justify-center"> </view>
            <!-- 			<view class="fill flex-col items-center justify-center" @click="navTo('/pages/public/yueCard',{login:true})">
							<text class="zh-m" v-if="userInfo.isVip==1">已开通</text>
							<text class="zh-m" v-else>未开通</text>
							<text class="zh-item-title">月卡</text>
						</view> -->
            <view class="fill flex-col items-center justify-center"> </view>
            <!-- 	<view class="fill flex-col items-center justify-center">
							<view class="btn" @click="handleOpen">
								退款
							</view>
						</view> -->
          </view>
        </view>
        <view class="guanggao" @click="goToVip" v-if="!isVip">
          <image src="@/static/img/huiyuan.png"></image>
        </view>
        <view class="con flex-row items-center" style="margin-top: 30rpx">
          <view
            class="item flex-col items-center justify-center"
            hover-class="hover-dark"
            @click="navTo('/pages/tabs/chong', { login: true })"
          >
            <image src="/static/img/zhcz.png" mode="" class="item-icon"></image>
            <text class="item-title">账户充值</text>
          </view>
          <view
            class="item flex-col items-center justify-center"
            hover-class="hover-dark"
            @click="navTo('/pages/myself/card', { login: true })"
          >
            <image src="/static/img/czjl.png" mode="" class="item-icon"></image>
            <text class="item-title">账户明细</text>
          </view>
          <view
            class="item flex-col items-center justify-center"
            hover-class="hover-dark"
            @click="navTo('/pages/tabs/order', { login: true })"
          >
            <image
              src="/static/img/myorder.png"
              mode=""
              class="item-icon"
            ></image>
            <text class="item-title">我的订单</text>
          </view>
          <view
            class="item flex-col items-center justify-center"
            hover-class="hover-dark"
            @click="navTo('/pages/myself/cart?souce=0', { login: true })"
          >
            <image src="/static/img/ac.png" mode="" class="item-icon"></image>
            <text class="item-title">我的爱车</text>
          </view>
          <!-- 				<view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="showToast">
						<image src="/static/img/sc.png" mode="" class="item-icon"></image>
						<text class="item-title">我的收藏</text>
					</view> -->
        </view>
        <view
          class="con flex-row items-center"
          style="margin-top: 30rpx; flex-wrap: wrap"
        >
          <view
            class="item flex-col items-center justify-center"
            hover-class="hover-dark"
            @click="navTo('/pages/public/fuwenben?type=7&name=使用说明')"
          >
            <image
              src="/static/img/dkw.png"
              mode=""
              class="item-b-icon"
            ></image>
            <text class="item-title">使用说明</text>
          </view>
          <view
            class="item flex-col items-center justify-center"
            hover-class="hover-dark"
            @click="navTo('/pages/public/question')"
          >
            <image src="/static/img/wt.png" mode="" class="item-b-icon"></image>
            <text class="item-title">常见问题</text>
          </view>
          <view
            class="item flex-col items-center justify-center"
            hover-class="hover-dark"
            @click="navTo('/pages/public/finker', { login: true })"
          >
            <image src="/static/img/fk.png" mode="" class="item-b-icon"></image>
            <text class="item-title">问题反馈</text>
          </view>
          <!-- 		<view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="navTo('/pages/public/declare',{login:true})">
						<image src="/static/img/gz.png" mode="" class="item-b-icon"></image>
						<text class="item-title">故障申报</text>
					</view> -->
          <view
            class="item flex-col items-center justify-center"
            hover-class="hover-dark"
            @click="navTo('/pages/public/linkwe')"
          >
            <image src="/static/img/lx.png" mode="" class="item-b-icon"></image>
            <text class="item-title">联系我们</text>
          </view>
          <!-- <view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="navTo('/pages/public/add',{login:true})">
						<image src="/static/img/jm.png" mode="" class="item-b-icon"></image>
						<text class="item-title">我要加盟</text>
					</view>
					<view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="handleStation">
						<image src="/static/img/jz.png" mode="" class="item-b-icon"></image>
						<text class="item-title">申请建站</text>
					</view>
					<view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="handleServer">
						<image src="/static/img/tz.png" mode="" class="item-b-icon"></image>
						<text class="item-title">申请投资</text>
					</view>
					<view class="item flex-col items-center justify-center" hover-class="hover-dark" @click="handleJiu">
						<image src="/static/img/yjjy.png" mode="" class="item-b-icon"></image>
						<text class="item-title">一键救援</text>
					</view>
					<view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="navTo('/pages_servce/servce/remond',{login:true})">
						<image src="/static/img/jil.png" mode="" class="item-b-icon"></image>
						<text class="item-title">救援记录</text>
					</view> -->
          <!-- <view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="navTo('/pages_invoice/invoice/invoice',{login:true})">
						<image src="/static/img/fptt.png" mode="" style="height: 43rpx;" class="item-b-icon"></image>
						<text class="item-title">发票抬头</text>
					</view> -->
          <!-- 				<view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="navTo('/pages/public/pre-book',{login:true})">
						<image src="/static/img/yyjl.png" mode="" class="item-b-icon"></image>
						<text class="item-title">预约记录</text>
					</view> -->
          <!-- 					<view class="item flex-col items-center justify-center" hover-class="hover-dark"
						@click="navTo('/pages/public/electric-card',{login:true})">
						<image style="height: 35rpx;" src="/static/img/dkgm.png" mode="" class="item-b-icon"></image>
						<text class="item-title">电卡购买</text>
					</view> -->
        </view>
        <view class="foot" v-if="userInfo.id">
          <view class="btn" @click="handleLogOff"> 退出登录 </view>
        </view>
        <!-- 会员弹窗 -->

        <uni-popup
          ref="vipPopup"
          type="bottom"
          :mask-click="true"
          background-color="#f4f4f4"
        >
          <view
            class="chargeDetailsStyle"
            style="
              background-color: #f4f4f4;
              display: flex;
              flex-direction: column;
              align-items: center;
              height: 500rpx;
              padding: 30rpx;
            "
          >
            <view
              class="title"
              style="font-size: 20px; font-weight: bold; margin-top: 30p"
              >确认开通会员</view
            >
            <view class="desc" style="font-size: 16px; margin-top: 40rpx">
              开通会员仅需
              <text style="color: #ff710b; font-weight: bold">6.9元</text
              >，是否确认开通？
            </view>
            <view
              class="actions"
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-top: 100rpx;
              "
            >
              <button
                class="btn-confirm"
                style="
                  width: 40%;
                  height: 80rpx;
                  line-height: 80rpx;
                  background-color: #ff710b !important;
                  color: #fff;
                  border-radius: 40rpx;
                  border: none;
                "
                @click="confirmVip"
              >
                确认开通
              </button>
              <button
                class="btn-cancel"
                style="
                  width: 40%;
                  height: 80rpx;
                  line-height: 80rpx;
                  background-color: #fff;
                  color: #333;
                  border-radius: 40rpx;
                  border: 1px solid #333;
                "
                @click="closeVipPopup"
              >
                取消
              </button>
            </view>
          </view>
        </uni-popup>
      </view>
    </view>
    <tabbar :isPages="4"></tabbar>
    <model
      isModel="3"
      ref="model"
      @refund="refundFn"
      :info="{
        title: '确认退款？',
        content: '账户余额将原路返还，赠送余额将清零',
        btn: '再想想',
        btnTwo: '确定',
      }"
    ></model>
  </view>
</template>

<script>
import model from "@/components/modal/model.vue";
export default {
  components: {
    model,
  },
  data() {
    return {
      userInfo: {},
	  isVip: false,
    };
  },
  onLoad() {
    uni.hideTabBar();
    this.userInfo = getApp().globalData.userInfo;
  },
  onShow() {
    this.userInfoGet();
	this.isVip()
  },

  methods: {
    goToVip() {
      // this.showVipPopup = true;
      this.openVip();
    },
    openVip() {
      this.$refs.vipPopup.open();
    },
	// 是否开通会员
	async isVip(){
		const res = await this.$request('user/info',{
			uid: uni.getStorageSync('uid'),
		})
		if(res.result == 0){
			this.isVip = res.data.isVip
		}
	},
    async confirmVip() {
      this.$refs.vipPopup.close();
	  const res = await this.$request('user/pay-month-card',{
		uid: uni.getStorageSync('uid'),
		type: '1',
		price: 6.9,
		month: 1,
	  })
	  if(res.result == 0){
		this.$util.msg('开通会员成功')
	  }else{
		this.$util.msg(res.resultNote)
	  }

    //   this.$util && this.$util.msg
    //     ? this.$util.msg("开通会员功能开发中~")
    //     : uni.showToast({ title: "开通会员功能开发中~", icon: "none" });
    },
    closeVipPopup() {
      this.$refs.vipPopup.close();
    },
    showToast() {
      uni.showToast({
        title: "该功能暂不可用",
        icon: "none",
        duration: 2000,
      });
    },
    handleOpen() {
      console.log(Number(this.userInfo.commission));
      if (Number(this.userInfo.balance) == 0) return;
      this.$refs.model.open();
    },
    handleStation() {
      if (this.userInfo.isZz == "1")
        return this.navTo("/pages/power/power?type=1", {
          login: true,
        });
      this.navTo("/pages/public/site", {
        login: true,
      });
    },
    handleServer() {
      if (this.userInfo.isTz == "1")
        return this.navTo("/pages/power/power?type=2", {
          login: true,
        });
      this.navTo("/pages/public/investment", { login: true });
    },
    handleLogin() {
      // #ifdef APP-PLUS
      this.navTo("/pages/login/login");
      // #endif
      // #ifndef APP-PLUS
      this.navTo("/pages/public/login");
      // #endif
    },
    handleJiu() {
      // #ifdef APP-PLUS
      this.navTo("/pages_servce/servce/nmap", {
        login: true,
      });
      // #endif
      // #ifndef APP-PLUS
      this.navTo("/pages_servce/servce/map", {
        login: true,
      });
      // #endif
    },
    handleLogOff() {
      uni.removeStorageSync("uid");
      getApp().globalData.userInfo = {};
      this.switchTab("/pages/tabs/home");
    },
    async userInfoGet() {
      if (!uni.getStorageSync("uid")) return (this.userInfo = {});

      // 添加调试日志 - 记录用户ID
      const uid = uni.getStorageSync("uid");
      console.log("准备请求user/info API，用户ID:", uid);

      try {
        const res = await this.$request("user/info", {
          uid: uid,
        });

        // 添加调试日志 - 记录完整响应
        console.log("user/info API响应:", JSON.stringify(res));

        if (res.result == 0) {
          getApp().globalData.userInfo = res.data;
          this.userInfo = res.data;
        } else {
          console.error("user/info API返回错误:", res.resultNote);
          this.$util.msg(res.resultNote);
        }
      } catch (error) {
        // 添加调试日志 - 记录异常
        console.error("user/info API请求异常:", error);
        this.$util.msg("获取用户信息失败，请稍后再试");
      }
    },
    async refundFn() {
      let res = await this.$request("user/withdraw-refund", {
        uid: uni.getStorageSync("uid"),
      });
      if (res.result == "0") {
        this.$util.msg("退款成功");
      } else {
        this.$util.msg(res.resultNote);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.top-bg {
  width: 750rpx;
  height: 260rpx;
  background: #ff710b;
  position: relative;
  padding: 30rpx 30rpx 120rpx 30rpx;
  margin-bottom: 300rpx;
}
.guanggao {
  width: 100%;
  height: 200rpx;
  margin-bottom: 30rpx;
  border-radius: 10px;
  margin-top: 30rpx;
  image {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.con {
  // height: 187rpx;
  background: #ffffff;
  box-shadow: 0px 5rpx 30rpx 0px rgba(112, 112, 112, 0.13);
  border-radius: 20rpx;
  padding: 25rpx 30rpx;
}

.top-con {
  width: 700rpx;
  position: absolute;
  left: 25rpx;
  top: 180rpx;
  z-index: 9;
}

.login-btn {
  width: 107rpx;
  height: 44rpx;
  background: #ff710b;
  border-radius: 22rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 44rpx;
}

.message-icon {
  width: 36rpx;
  height: 45rpx;
}

.active {
  width: 14rpx;
  height: 14rpx;
  background: #ff710b;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.user-phone {
  font-size: 24rpx;
  font-weight: 500;
  color: #fff;
}

.item {
  width: 25%;
  padding: 25rpx 0;
}

.item-icon {
  width: 86rpx;
  height: 86rpx;
}

.item-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  padding-top: 10rpx;
}

.item-b-icon {
  width: 50rpx;
  height: 50rpx;
}

.zh-icon {
  width: 32rpx;
  height: 32rpx;
}

.zh-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
  padding-left: 10rpx;
}

.zh-m {
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}

.zh-item-title {
  font-size: 24rpx;
  font-weight: 500;
  color: #787878;
  // padding-top: 10rpx;
}

.btn {
  width: 128rpx;
  height: 61rpx;
  background: #ff710b;
  border-radius: 31rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 61rpx;
}

.foot {
  margin-top: 50rpx;

  .btn {
    width: 640rpx;
    height: 110rpx;
    background: #ff710b;
    border-radius: 55rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fff;
    line-height: 110rpx;
    text-align: center;
    margin: 0 auto;
  }
}
</style>
